<template>
<div>
	<el-form ref="form" :rules="rules" :model="productDetail" label-width="180px">

		<el-form-item label="产品信息：" >
			{{productDetail.code}} / {{label.product_attr[parseInt(productDetail.product_attr)]}} / {{label.sale_belong[productDetail.sale_belong]}}
		</el-form-item>

		<el-form-item label="产品名称：" prop="name" >
			<el-input v-model="productDetail.name" placeholder="请输入产品名称" style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="商城卖价：" >
			{{productDetail.guide_price}}

			<el-tooltip class="item" effect="dark" placement="right"
	    	content="产品中所有型号的最低价。" >
	    		<i class="el-icon-warning ml10 info pointer"></i>
	    	</el-tooltip>
		</el-form-item>

		<el-form-item label="是否可退：">
		    <!-- <el-switch v-model="productDetail.back_type" 
		    active-value="0" inactive-value="1"></el-switch> -->
		    <el-radio-group v-if="productDetail.product_attr_sub == undefined || productDetail.product_attr_sub == '1'" 
		    v-model="productDetail.back_type">
		      <el-radio label="1" >不可退</el-radio>
		      <el-radio label="0" >可退</el-radio>
		    </el-radio-group>

		   	<span v-else> 套票产品不可退 </span>

		    <el-tooltip class="item" effect="dark" placement="right" >
		    	<div slot="content">
		    		可退：核销后分佣;
		    		不可退：购买后分佣</div>
		    	<i class="el-icon-warning ml10 info pointer"></i>
		    </el-tooltip>

		</el-form-item>

		<el-form-item label="发送短信：" >
		    <el-switch v-model="productDetail.sms_type"
		    active-value="1" inactive-value="0"></el-switch>
		</el-form-item>

		<el-form-item label="短信其他说明：" prop="sms_diy" 
		v-if="productDetail.sms_type == '1'" >
		    <el-input type="textarea" autosize 
		    v-model="productDetail.sms_diy" 
		    style="width:300px;"></el-input>
		</el-form-item>

		<el-form-item label="启用购买时间：">
		    <el-switch v-model="productDetail.flash_state"
		    active-value="1" inactive-value="0"></el-switch>

		    <daterange v-if="productDetail.flash_state == '1'" class="ml20" 
		    v-bind:se.sync="fse" 
		    type='datetimerange'
		    ></daterange>
		</el-form-item>

		<el-form-item label="启用出游时间：" v-if="productDetail.price_type == '0'">
		    <el-switch v-model="productDetail.tour_date_type"
		    active-value="1" inactive-value="0"></el-switch>

		    <daterange v-if="productDetail.tour_date_type == '1'" class="ml20" 
		    v-bind:se.sync="tse"
		    type="daterange"
		     ></daterange>

		    <el-tooltip v-if="productDetail.tour_date_type == '1'"
		    class="item" effect="dark" placement="right" >
		    	<div slot="content">
		    		这个时间范围是可选择的出游时间的范围
		    	</div>
		    	<i class="el-icon-warning ml10 info pointer"></i>
		    </el-tooltip>
		</el-form-item>

		<el-form-item label="生效时间：">
		    <el-select v-model="productDetail.take_effect_type" placeholder="请选择生效时间">
		      <el-option label="次日生效" :value="-1"></el-option>
		      <el-option label="即时生效" :value="0"></el-option>
		      <el-option label="1小时后生效" :value="1"></el-option>
		      <el-option label="2小时后生效" :value="2"></el-option>
		      <el-option label="4小时后生效" :value="4"></el-option>
		      <el-option label="12小时后生效" :value="12"></el-option>
		    </el-select>
		</el-form-item>

		<el-form-item label="身份证是否必填：">
		    <el-switch v-model="productDetail.cardno_state"
		    active-value="1" inactive-value="0"></el-switch>
		</el-form-item>

		<el-form-item label="是否在商城中隐藏：">
		    <el-switch v-model="productDetail.isshow"
		    active-value="1" inactive-value="0"></el-switch>

		    <el-tooltip class="item" effect="dark" placement="right" >
		    	<div slot="content">
		    		启用该选项后，商城中不显示该产品，货架中正常显示。
		    	</div>
		    	<i class="el-icon-warning ml10 info pointer"></i>
		    </el-tooltip>

		</el-form-item>

		<el-form-item label="是否通知商家：">
		    <el-switch v-model="productDetail.order_sms_state"
		    active-value="1" inactive-value="0"></el-switch>

		    <!-- <daterange v-if="productDetail.order_sms_state == '1'" class="ml20" 
		    v-bind:se.sync="tse"
		    type="daterange"
		     ></daterange> -->

		    <el-input v-if="productDetail.order_sms_state == '1'" 
		     v-model="productDetail.order_sms_mobile" placeholder="电话" style="width:150px; margin-left:10px;"></el-input>

		    <el-tooltip
		    class="item" effect="dark" placement="right" >
		    	<div slot="content">
		    		启用该选项后，用户下单后会给这个电话发送一条下单短信。
		    	</div>
		    	<i class="el-icon-warning ml10 info pointer"></i>
		    </el-tooltip>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" size="medium" @click="onSubmit('form')">确认修改</el-button>
		</el-form-item>
		
	</el-form>


</div>
</template>

<script>

import { mapGetters } from 'vuex'
import daterange from '../../../components/daterange'
import { date2str } from '../../../config/util'

export default {
	name: 'ticketbase',
	data () {
		var validateSMSDiy = (rule, value, callback) => {
			if (value === '' && this.productDetail.sms_type == '1') {
				callback(new Error('请输入短信其他说明'));
			} else if (value.length > 20 && this.productDetail.sms_type == '1') {
				callback(new Error('短信其他说明最多不超过20个字'));
			} else {
				callback();
			}
		};

		return {
		  	s_e : [new Date(), new Date()],
		  	rules: {
	          name: [
	            { required: true, message: '请输入产品名称', trigger: 'blur' },
	            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
	          ],
	          sms_diy: [
	            { validator: validateSMSDiy, trigger: 'blur' }
	          ],
	        },

	        fse : [
	        	this.productDetail.start_time ? 
	        	this.productDetail.start_time : date2str(new Date()) + ' 00:00:00',
	        	this.productDetail.end_time ?
	        	this.productDetail.end_time : date2str(new Date()) + ' 23:59:59'
	        ],

	        tse : [
	        	this.productDetail.tour_date_limit_start ?
	        	this.productDetail.tour_date_limit_start : date2str(new Date),
	        	this.productDetail.tour_date_limit_end ?
	        	this.productDetail.tour_date_limit_end : new Date().getFullYear() + '-12-31'
	        ],


	        label : {
	        	sale_belong : {
	        		'qunmeng' : '自营',
	        		'weshop_piaofutong' : '票付通',
	        		'weshop_tstc_bg' : '天时同城（北国）',
	        		'weshop_tstc_al' : '天时同城（爱旅）',
	        		'weshop_juyou' : '居游',
	        		'weshop_royaloc' : '海洋馆',
	        		'weshop_yinkehuanqi' : '银科环企',
	        		'weshop_zhiyoubao' : '自游宝',
	        		'weshop_ziwoyou' : '自我游',
	        	},

	        	product_attr : ['', '电子票', '儿童剧', '实物'],
	        },
		}
	},

	props: {
	  	productDetail : Object,
	},

	components: {
		daterange,
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		onSubmit () {

			this.$refs['form'].validate((valid) => {
				if (valid) {

					var para = {
						id : this.productDetail.id,
						sale_code : this.productDetail.sale_code,
						name : this.productDetail.name,
						market_price : this.productDetail.market_price,
						back_type : this.productDetail.back_type,
						sms_type : this.productDetail.sms_type,
						sms_diy : this.productDetail.sms_diy,
						flash_state : this.productDetail.flash_state,
						tour_date_type : this.productDetail.tour_date_type,
						take_effect_type : this.productDetail.take_effect_type,
						nopay_cancel_minute : this.productDetail.nopay_cancel_minute,
						cardno_state : this.productDetail.cardno_state,
						isshow : this.productDetail.isshow,
						start_time : this.fse[0],
						end_time : this.fse[1],
						tour_date_limit_start : this.tse[0],
						tour_date_limit_end : this.tse[1],
						order_sms_state : this.productDetail.order_sms_state,
						order_sms_mobile : this.productDetail.order_sms_mobile,
						cb : res => {
							this.$notify({
					          title: '成功',
					          message: '保存成功',
					          type: 'success'
					        });
						},
						err : res => {
							this.$notify({
					          title: '保存失败',
					          message: res,
					          type: 'error'
					        });
						}
					};

					console.log(para);

					this.$store.dispatch('updateProduct_ticketBase', para);


				} else {
					console.log('error submit!!');
					return false;
				}
			});


			
		}
	},

	watch:{
	    
	},

	mounted () {
		
		
	},

}
</script>

<style scoped>

</style>
